<template>
    <div class="card" :style="{ 'borderColor': row.color }">
    <div class="card-left">
      <div style="margin-top: 1vh;font-size:large;font-weight: 700;color: #028370;margin-left: 1vh;">
        <font-awesome-icon style="width: 2vh;margin-right: 2vh;font-size: 18px" :icon="row.icon"></font-awesome-icon>
        {{ row.name }}
      </div>
      <div class="detail">
        <div class="count-flop" :key="compKey">
        <div :class="item!='.'?'count-flop-box':'count-flop-point'" v-for="(item, index) in value" :key="index">
            <div v-if="item!='.'" class="count-flop-content" :class="['rolling_' + item]">
                <div v-for="(item2,index2) in numberList" :key="index2" style="">{{item2}}</div>
            </div>
            <div v-else class="count-flop-content">.</div>
        </div>
        <div v-if="suffix" class="count-flop-unit">{{suffix}}</div>
        <!-- <div class="card-right">
            <el-icon class="paging_button_icon">
              <ArrowUp />
            </el-icon>
      <i :class="row.icon"></i>
    </div> -->
    </div>
    </div>
    </div>
    

  </div>
</template>
<script>
import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome";

export default {
  components: {
    FontAwesomeIcon
  },
  data() {
    return {
      value: [],
      numberList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
      compKey: 0
    };
  },
  props: ["val","suffix","row"],
  watch: {
    val() {
      this.value = this.val.toString().split("");
      this.compKey += 1;
    }
  },
  created() {
    this.value = this.val.toString().split("");
  },
};
</script>
<style scoped>
  .card{
    border-radius: 4px;
    overflow: hidden;
    border-left: 6px solid;
    /*height: 15vh;*/
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: calc(25% - 26px);
    /*background-color: var(--system-page-background);*/
    background-color: white;
    margin: 10px;
    box-shadow: 3px 3px 10px 0 rgba(58, 59, 69, 0.15);
    /*&-left{*/
    /*  display: flex;*/
    /*  flex-direction: column;*/
    /*  justify-content: center;*/
    /*  align-items: flex-start;*/
    /*  padding-left: 20px;*/
    /*  !* .name {*/
    /*    line-height: 28px;*/
    /*    color: var(--system-page-tip-color);*/
    /*    font-size: 16px;*/
    /*    margin-bottom: 14px;*/
    /*  } *!*/
    /*  .detail {*/
    /*    font-size: 20px;*/
    /*    font-weight: bold;*/
    /*    color: var(--system-page-color);*/
    /*  }*/
    /*}*/
    /*&-right {*/
    /*  padding-right: 15px;*/
    /*  i {*/
    /*    font-size: 40px;*/
    /*    font-weight: 900;*/
    /*    color: #e6e8ef;*/
    /*  }*/
    /*}*/
  }
  @media screen and ( max-width: 1200px ) {
    .card {
      width: calc(50% - 26px);
    }
  }
  @media screen and ( max-width: 500px ) {
    .card {
      width: calc(100% - 26px);
    }
  }

    .count-flop {
        margin-left: 1vh;
        display: inline-block;
        /* 可更改 */
        height: 50px;
        line-height: 50px;
        font-size: 30px;
        color: #04c1a5;
    }
 
    .count-flop > div {
        position: relative;
        display: inline-block;
        overflow: hidden;
        height: 100%;
    }
 

    .count-flop-box {
        /* 可更改 */
        margin-right: 5px;
        width: 20px;
        /*border: 1px solid rgba(72, 152, 241, 0.3);*/
        line-height: 50px;
        border-radius: 6px;
    }
 
    .count-flop-point {
        /* 可更改 */
        margin-right: 5px;
        width: 30px;
    }
 
    .count-flop-content {
        font-family: MicrosoftYaHei-Bold;
        text-align: center;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        animation-fill-mode: forwards !important;
    }
 
    .rolling_0 {
        animation: rolling_0 2.1s ease;
    }
 
    @keyframes rolling_0 {
        from {
            transform: translateY(-90%);
        }
        to {
            transform: translateY(0);
        }
    }
 
    .rolling_1 {
        animation: rolling_1 3s ease;
    }
 
    @keyframes rolling_1 {
        from {
            transform: translateY(0);
        }
        to {
            transform: translateY(-10%);
        }
    }
 
    .rolling_2 {
        animation: rolling_2 2.1s ease;
    }
 
    @keyframes rolling_2 {
        from {
            transform: translateY(0);
        }
        to {
            transform: translateY(-20%);
        }
    }
 
    .rolling_3 {
        animation: rolling_3 3s ease;
    }
 
    @keyframes rolling_3 {
        from {
            transform: translateY(0);
        }
        to {
            transform: translateY(-30%);
        }
    }
 
    .rolling_4 {
        animation: rolling_4 2.1s ease;
    }
 
    @keyframes rolling_4 {
        from {
            transform: translateY(0);
        }
        to {
            transform: translateY(-40%);
        }
    }
 
    .rolling_5 {
        animation: rolling_5 3s ease;
    }
 
    @keyframes rolling_5 {
        from {
            transform: translateY(0);
        }
        to {
            transform: translateY(-50%);
        }
    }
 
    .rolling_6 {
        animation: rolling_6 2.1s ease;
    }
 
    @keyframes rolling_6 {
        from {
            transform: translateY(0);
        }
        to {
            transform: translateY(-60%);
        }
    }
 
    .rolling_7 {
        animation: rolling_7 3.1s ease;
    }
 
    @keyframes rolling_7 {
        from {
            transform: translateY(0);
        }
        to {
            transform: translateY(-70%);
        }
    }
 
    .rolling_8 {
        animation: rolling_8 2.1s ease;
    }
 
    @keyframes rolling_8 {
        from {
            transform: translateY(0);
        }
        to {
            transform: translateY(-80%);
        }
    }
 
    .rolling_9 {
        animation: rolling_9 3.6s ease;
    }
 
    @keyframes rolling_9 {
        from {
            transform: translateY(0);
        }
        to {
            transform: translateY(-90%);
        }
    }
</style>